﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSSCircleStudy._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .r_top, .r_bottom
        {
            display: block;
            background: transparent;
            font-size: 0px;
        }
        .box
        {
            border-left:1px solid #cf6;
            border-right:1px solid #cf6;
            }
        /*左上右上角和左下右下角的容器*/
        .r_a, .r_b, .r_c, .r_d
        {
            display: block;
            overflow: hidden;
        }
        /*四个圆角*/
        .r_a, .r_b, .r_c
        {
            height: 1px;
        }
        .r_b, .r_c, .r_d
        {
            background: #cf6;
        }
        .r_a
        {
            margin: 0 5px;
        }
        .r_b
        {
            margin: 0 3px;
            border-width: 0 1px;
        }
        .r_c
        {
            margin: 0 2px;
        }
        .r_d
        {
            height: 2px;
            margin: 0 1px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <!--左上角/右上角-->
        <div class="r_top">
            <em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em>
        </div>
        <div class="box">
            .....内容容器.....
        </div>
        <!--左下角/右下角-->
        <div class="r_bottom">
            <em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em>
        </div>
    </div>
    </form>
</body>
</html>
